
<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>注册</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >


    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

    </style>

    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();


        function check(){
            if(document.getElementById("pwd").value!=
                document.getElementById("pwd2").value)
            {
                document.getElementById("pwd2").value = null;
                return false;
            }else{
            }
        }

    </script>

    <link th:href="@{form.css}" rel="stylesheet">
</head>
<body class="bg-light" background="bg.jpg">
    <div class="container">
        <div class=" text-center">
            <img class="d-block mx-auto mb-4" src="log.png" alt="" style="margin: 10px 0 0 0" width="72" height="72">
            <h3 style="margin: 0 0 10px 0">项目标题</h3>
        </div>

            <div class="order-md-1">
                <form class="needs-validation" action="/new" method="post" onsubmit="return check()" novalidate>
                    <div class="mb-3">
                        <label>账号</label>
                        <div class="form-label-group">
                            <input type="text" id="loginid"  name="loginid" class="form-control" placeholder="账号" pattern="(\w|\W|\d){4,16}" required >
                            <div class = "invalid-feedback">
                                账号必填,4-16个字符
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label>昵称</label>
                        <div class="form-label-group">
                            <input type="text" id="name"  name="name" class="form-control" placeholder="昵称" pattern="(\w|\W|\d){2,16}" required >
                            <div class = "invalid-feedback">
                                昵称必填,2-16个字符
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label>性别</label>
                            <select class="custom-select d-block w-100" id="sex" name="sex" required>
                                <option>男</option>
                                <option>女</option>
                            </select>
                            <div class="invalid-feedback">
                                性别必填
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label>年龄</label>
                            <input type="text" id="age"  name="age" class="form-control" placeholder="年龄" pattern="^(?:[1-9][0-9]?|1[01][0-9]|120)$" required novalidate>
                            <div class="invalid-feedback">
                                年龄必填 1-120岁
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label>电话号码</label>
                        <div class="form-label-group">
                            <input type="text" id="number"  name="number" class="form-control" placeholder="电话号码" pattern="^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$" required >
                            <div class = "invalid-feedback">
                                请输入正确的电话号码
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label>密码</label>
                        <div class="form-label-group">
                            <input type="password" id="pwd" name="pwd" class="form-control" placeholder=" 密码" style="margin-top: 5px" pattern=".{6,20}" required>
                            <div class = "invalid-feedback">
                                密码必填,6-16个字符
                            </div>
                       </div>
                    </div>

                    <div class="mb-3">
                        <label>确认密码</label>
                        <div class="form-label-group">
                            <input type="password" id="pwd2" name="pwd2" class="form-control" placeholder="确认密码" style="margin-top: 5px" pattern=".{6,20}" required>
                            <div class = "invalid-feedback">
                                输入的密码与上次不同
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary btn-lg btn-block" id="submit" name="submit" type="submit" style="margin: 30px 0 15px 0px;">注册</button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
